import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaLocaleProvider,WeaNewScrollPagination, WeaErrorPage, WeaTools, WeaSearchGroup, WeaTop, WeaTab, WeaRightMenu, WeaLeftRightLayout, WeaDialog, WeaNewScroll, WeaBrowser, WeaOrgTree, WeaInputSearch } from 'ecCom';
import { Row, Col, Input, Tabs, Button, Alert, Spin, Icon, Form, Modal, Tooltip } from 'antd';
const TabPane = Tabs.TabPane;
const getLabel = WeaLocaleProvider.getLabel;
@inject('myWorkPlanStore')
@observer
class LeftContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      focus: false,
      height: 500,
      viewcondition:0
    }
  }
  componentDidMount() {
    // console.log("jQuery('.myWorkplan-left').height()",jQuery('.myWorkplan-left').height())

    window.addEventListener('resize', this.onWindowResize)
  }
  componentWillReceiveProps(nextProps) {
    this.setState({ height: jQuery('.myWorkplan-left').height() - 94 })
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.onWindowResize)
  }
  onWindowResize = () => {
    this.setState({ height: jQuery('.myWorkplan-left').height() - 94 })
  }
  render() {
    let { status, changeTimeType } = this.props.myWorkPlanStore
    let { height,viewcondition } = this.state;
    status = toJS(status);
    let { loading, timeType, userRoot, attentionData, selectedUser } = status;
    let browserParam = {
      hasAddBtn: false,
      hasAdvanceSerach: true,
      isAutoComplete: 1,
      isDetail: 0,
      isMultCheckbox: false,
      isSingle: false,
      linkUrl: "/hrm/resource/HrmResource.jsp?id=",
      quickSearchName: "",
      title: `${getLabel(83496,'多人力资源')}`,
      type: "17",
      viewAttr: 2,
    }
    let topTab = [
      {
        title: getLabel(26469,'我的关注'),
        viewcondition: 0
      },
      {
        title: getLabel(32997,'人员组织'),
        viewcondition: 1
      },
    ]

    return (
      <div className="myWorkplan-left" style={{ width: '221px', position: 'absolute', height: '100%', borderRight: '1px solid #d9d9d9' }}>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ud1u6o`}
          datas = {topTab}
          keyParam="viewcondition"
          onChange = {this.onChangeViewCondition}
          selectedKey = {viewcondition}
          className='myWorkplan-left-tab'
        />
      
          { viewcondition=='0' ? <div style={{height: 'calc(100% - 45px)',paddingTop:'5px'}}>
            <div className="search">
              <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@nelzkk`}  onSearch={this.handleSearch} />
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@r7zltc`}
                {...browserParam}
                customized={true}
                onChange={(ids, names, datas) => { this.onChangeBrowser(ids, names, datas) }}
                
              >
                <span className='addHrm'>
                  <i className="icon-coms-plus"/>
                </span> 
              </WeaBrowser>
            </div>

            <div style={{ height: 'calc(100% - 43px)'}}>
              {
                attentionData && attentionData.length == 0 && (
                  <div style={{ textAlign: 'center', marginTop: '50px', color: '#c5c5c5' }} >
                    <span className="icon-coms-blank" style={{ fontSize: '52px', marginBottom: '16px', display: 'block' }} />
                    <span >{getLabel(83320,'没有可显示的数据')}</span>
                  </div>
                )
              }
              <WeaNewScrollPagination ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScrollPagination@dv9hzq`}
                height={height}
                loading={true}
                overtime={1000}
                onScrollEnd={this.onScrollEnd}
              >
                <div className="allAttention">
                  {
                    attentionData && attentionData.length > 0 && attentionData.map((element) => {
                      let on = element.id == selectedUser ? 'on' : ''
                      return (
                        <div style={{ borderTop: '1px solid #ebebeb', cursor: 'pointer' }} className={`myAttentionList ${on}`} onClick={() => { this.changeCalender(element.id, element.name) }}>
                          <div className="cancelAttention" style={{ cursor: 'pointer' }} onClick={(e) => {e.stopPropagation(); this.cancelAttention(element.id); }}>
                            <span className="icon-coms-CancelConcern CancelConcern" style={{ cursor: 'pointer', padding: '0 4px 0 10px' }} />
                            <span className="cancelAttentionSpan" >{getLabel(26938,'取消关注')}</span>
                          </div>
                          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9gz06m@${element.id}`} style={{ paddingTop: '7px', paddingLeft: '20px' }}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@y6tcvr@${element.id}`} span={16}>
                              <span style={{ color: '#000' }}>{element.name}</span>
                            </Col>
                          </Row>
                          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@59nmcb@${element.id}`} style={{ paddingLeft: '20px', marginTop: '5px' }}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lih5c2@${element.id}`} className="text-overflow" span={24} style={{ maxWidth: '190px' }}>
                              <span className="text-overflow" style={{ color: '#999999', display: 'inline-block', minWidth: '50px', maxWidth: '120px' }}>{element.sub}</span>
                              <span style={{ paddingLeft: '10px', color: '#999999', display: 'inline-block', minWidth: '50px', overflow: 'hidden' }}>{element.dep}</span>
                            </Col>
                          </Row>

                        </div>
                      )
                    })
                  }
                </div>
              </WeaNewScrollPagination>
            </div>
          </div>
          :
          <div className='workplan-orgTree'>
            <div style={{ height: '100%',paddingTop:'5px' }}>
              <div className="user-tree-browser" style={{height: '100%'}}>
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@lh3ypf`} isSingle={true} linkUrl="/hrm/resource/HrmResource.jsp?id=" title={getLabel(179,'人力资源')} type="1" viewAttr="2"
                  customIcon="icon-coms-Reset"
                  // customIconTip={getLabel(18480,'我的日程')}
                  addOnClick={this.changeUserRoot}
                  replaceDatas={userRoot} onChange={this.changeUserRoot} />
              </div>
              <WeaNewScrollPagination ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScrollPagination@f29wcb`}
                height={height}
                loading={true}
                overtime={1000}
                onScrollEnd={this.onScrollEnd}
              >
              <div style={{height: '100%', paddingBottom: 5, paddingTop: 10}}>
                <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@xnxocc`} dataUrl="/api/hrm/base/getHrmResourceTree" rootKey="rootManager" treeNodeClick={this.chooseUser}
                            params={userRoot && userRoot[0] ? {rootid: userRoot[0].id} : {}}
                />
              </div>
            </WeaNewScrollPagination>
            </div>
          </div>}
      </div>
    )
  }

  onChangeViewCondition = e => {
    this.setState({viewcondition:e})
  }

  onScrollEnd = () => {
    const {value} = this.state
    let { doattention, status } = this.props.myWorkPlanStore;
    let { pageNum, totalPage } = toJS(status)
    if (pageNum <= totalPage) {
      doattention(pageNum,value);
    }
  }

  changeCalender = (id, name) => {
    let { changeSelectedUser, status, doUpdateCalender } = this.props.myWorkPlanStore;
    let { selectedUser } = toJS(status)
    changeSelectedUser(id, name);
    selectedUser == id && doUpdateCalender(true)
  }

  onChangeBrowser = (ids, names, datas) => {
    const {value} = this.state
    let { addAttention } = this.props.myWorkPlanStore
    addAttention(ids,()=>{this.handleSearch(value)});
  }

  cancelAttention = (id) => {
    let _this = this
    const {value} = this.state
    Modal.confirm({
      title: `${getLabel(131329,'信息确认')}`,
      content: `${getLabel(384420,'确认要取消关注吗？')}`,
      onOk() {
        _this.props.myWorkPlanStore.delAttention(id,()=>{
          _this.handleSearch(value)
        })
      },
      onCancel() { },
    });
  }

  handleSearch = (value) => {
    let { getAttentionData } = this.props.myWorkPlanStore
    let attentionParams = { searchStr: value }
    this.setState({value:value})
    getAttentionData(attentionParams);
  }

  changeUserRoot = (ids, names, datas = undefined) => {
    this.props.myWorkPlanStore.changeUserRoot(ids, names, datas);
  }

  chooseUser = (e) => {
    this.props.myWorkPlanStore.changeUserRoot(e.node.props.id, e.node.props.name, '');
  }

}

export default LeftContainer
